import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Button,
    TouchableOpacity,
    TextInput,
} from 'react-native';

export default class Login extends Component {
    // 构造
    constructor() {
        super();
        // 初始状态
        this.state = {
            phoneNum: '',
            pwd: '',
            isLogin: true
        };
    }

    savePhone(phone) {
        this.setState({
            phoneNum: phone
        })
        /*if (phone == '' || this.state.pwd == '') {
            this.setState({
                isLogin: true
            })
        } else {
            this.setState({
                isLogin: false
            })
        }*/
    }

    savePwd(pwd) {
        this.setState({
            pwd: pwd
        })

        /*if (this.state.phoneNum == '' || pwd == '') {
            this.setState({
                isLogin: true
            })
        } else {
            this.setState({
                isLogin: false
            })
        }*/
    }

    toLogin = () => {
        fetch('http://jj.baodiango.com/AppHome/login_exec', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                phone: '17771861240',
                password: '123456',
            })
            /*body: JSON.stringify({
                phone: this.state.phoneNum,
                password: this.state.pwd,
            })*/
        })
            .then((result) => {
                //alert(JSON.stringify(result));
                console.log("RZC :" + result.code);
                this.props.navigation.navigate('Home',{name :'Home'});
                if (result.code == 200){

                }
            })
            .catch((error) => {
                //异常处理
                alert("错误 ："+error);
            })

    }


    render() {
        return (
            <View style={styles.container}>
                <View style={styles.top}>
                    <Image/>
                    <Text style={styles.title}>帐号登录</Text>
                    <Text style={styles.toRegist}>注册</Text>
                </View>

                <TextInput style={styles.phoneInput}
                           placeholder='请输入手机号'
                           maxLength={11}
                           keyboardType='numeric'
                           onChangeText={(phone) => this.savePhone(phone)}/>
                <TextInput style={styles.pwdInput}
                           placeholder='请输入密码'
                           secureTextEntry={true}
                           onChangeText={(pwd) => this.savePwd(pwd)}/>

                <View style={styles.forget}>
                    <Text style={styles.toForget}>忘记密码</Text>
                    <Image source={require('../img/forget.png')}
                           style={{width: 20, height: 20}}/>
                </View>

                <TouchableOpacity style={styles.bt_login}
                                  onPress={this.toLogin}>
                    <Text style={styles.toLogin}>登录</Text>
                </TouchableOpacity>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingLeft: 20,
        paddingRight: 20,
        backgroundColor: '#fff'
    },
    top: {
        marginTop: 0,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        fontSize: 30,
        color: '#111',
        alignContent: 'center'
    },

    toRegist: {
        position: 'absolute',
        fontSize: 20,
        right: 0,
        color: '#e17e11'
    },

    phoneInput: {
        fontSize: 25,
        marginTop: 100,
    },
    pwdInput: {
        fontSize: 25,
    },
    forget: {
        marginTop: 10,
        alignSelf: 'stretch',
        flexDirection: 'row-reverse',
        alignItems: 'center'
    },
    toForget: {
        fontSize: 20,
        color: "#000",

    },
    bt_login: {
        marginLeft: 30,
        marginRight: 30,
        marginTop: 50,
        backgroundColor: '#ff6347',
        borderRadius: 20,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    toLogin: {
        paddingBottom: 10,
        paddingTop: 10,
        alignSelf: 'stretch',
        fontSize: 25,
        color: '#ddd'
    }
})